<template>
    <div class="widget-body am-fr">
        <el-form :inline="true" :rules="rules" ref="query" label-width="130px" class="demo-query">
            <div v-if="isWindow" class='total-score'>
                <el-form-item label="最终得分：">
                    <span>{{questionDetail.courseClass&&questionDetail.courseClass.headCoefficientScore | formatNumber(2)||'--'}}</span>
                </el-form-item>
            </div>
            <el-form-item label="校区：">
                <span>{{questionDetail.courseClass&&questionDetail.courseClass.campusName}}</span>
            </el-form-item>
            <el-form-item label="班级：">
                <span>{{questionDetail.courseClass&&questionDetail.courseClass.className}} </span>
            </el-form-item>
            <el-form-item label="本班人数：">
                <span v-if="questionDetail.courseClass">{{questionDetail.courseClass.regAmount||questionDetail.courseClass.regNum}}</span>
            </el-form-item>
            <el-form-item label="教师：">
                <span>{{questionDetail.courseClass&&questionDetail.courseClass.teacherName}}</span>
            </el-form-item>
            <el-form-item v-if="isWindow" label="调研问卷份数：">
                <span>{{questionDetail.courseClass&&questionDetail.courseClass.totalNum}}</span>
            </el-form-item>
            <el-form-item v-if="!isWindow" label="调研问卷份数：" prop="questionTotal">
                <el-input type="Number" placeholder="" v-model="totalNum"></el-input>
            </el-form-item>
          <el-table
            class="am-form-group"
            :data="questions"
            border
            stripe
          >
            <el-table-column
              prop="questionnaireQuestionNo"
              label="题目"
              min-width="80">
            </el-table-column>
            <el-table-column
              prop="content"
              label="题干"
              min-width="200">
            </el-table-column>
            <el-table-column
              prop="score"
              label="优"
              min-width="80">
              <template scope="scope">
                <div>
                  <el-input @change="handleChange(scope.row)" v-if="!isWindow" v-model="scope.row.resultTable[0].questionNum"></el-input>
                  <div v-else>{{scope.row.resultTable[0].questionNum}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="score"
              label="良"
              min-width="80">
              <template scope="scope">
                <div>
                  <el-input @change="handleChange(scope.row)" v-if="!isWindow" v-model="scope.row.resultTable[1].questionNum"></el-input>
                  <div v-else>{{scope.row.resultTable[1].questionNum}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="score"
              label="中"
              min-width="80">
              <template scope="scope">
                <div>
                  <el-input @change="handleChange(scope.row)" v-if="!isWindow" v-model="scope.row.resultTable[2].questionNum"></el-input>
                  <div v-else>{{scope.row.resultTable[2].questionNum}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="score"
              label="差"
              min-width="80">
              <template scope="scope">
                <div>
                  <el-input @change="handleChange(scope.row)" v-if="!isWindow" v-model="scope.row.resultTable[3].questionNum"></el-input>
                  <div v-else>{{scope.row.resultTable[3].questionNum}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="score"
              label="合计"
              v-if="!isWindow"
              min-width="80">
              <template scope="scope">
                <div>
                  {{scope.row.sum}}
                </div>
              </template>
            </el-table-column>
          </el-table>
            <hr>
            <div v-if="!isWindow" class="am-text-center">
                <el-button :disabled="disabledBtn" type="primary" @click="submitForm()">提交</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
import io from '../../lib/io'
import util from '../../lib/util'
export default {
  data() {
        return {
            formInline: {},
            examPaperId: '',
            totalNum: '',
            currentQuestionNo: 0,
            disabledBtn: false,
            isEdit: false,
            questionTotal: '',
            rules: {
                questionTotal: [
                    // { required: true, message: '请输入份数' }
                ],
            }
        };
    },
    props: ['isWindow', 'questionDetail', 'classId', 'questionnaireId'],
    mounted: function() {
        $(window).smoothScroll()
        util.initReEdit();
    },
    computed: {
        questions() {
          let questionDetail = JSON.parse(JSON.stringify(this.questionDetail))
            if (this.isWindow) {
                questionDetail && questionDetail.questionnaireQuestionList.map((item) => {
                    item.resultTable = [{
                        levle: '优',
                        questionNum: item.optimalNum
                    }, {
                        levle: '良',
                        questionNum: item.goodNum
                    }, {
                        levle: '中',
                        questionNum: item.midNum
                    }, {
                        levle: '差',
                        questionNum: item.badNum
                    }]
                })
            } else {
                questionDetail && questionDetail.questionnaireQuestionList.map((item) => {
                    item.resultTable = [{
                        levle: '优',
                        questionNum: ''
                    }, {
                        levle: '良',
                        questionNum: ''
                    }, {
                        levle: '中',
                        questionNum: ''
                    }, {
                        levle: '差',
                        questionNum: ''
                    }]
                  item.sum = 0
                })
            }
            return questionDetail.questionnaireQuestionList || [{
                questionnaireQuestionNo: '',
                content: '',
                score: '',
                sum: 0,
            }]
        }
    },
    created: function() {
        console.log('questionDetail', this.questionDetail)
        this.disabledBtn = false
    },
    methods: {
        handleChange (item) {
          let sum = Number(item.resultTable[0].questionNum || 0) + Number(item.resultTable[1].questionNum || 0) +
            Number(item.resultTable[2].questionNum || 0) + Number(item.resultTable[3].questionNum || 0)
          this.$set(item, 'sum', sum)
        },
        submitForm() {
            let _this = this
            let classQuestionDetailJson = [];
            if(!this.totalNum){
                this.$alert('请输入份数！');
                return;
            }
            this.questions.map((item) => {
                classQuestionDetailJson.push({
                    questionnaireQuestionId: item.questionnaireQuestionId,
                    optimalNum: item.resultTable[0].questionNum,
                    goodNum: item.resultTable[1].questionNum,
                    midNum: item.resultTable[2].questionNum,
                    badNum: item.resultTable[3].questionNum,
                })
            })
            this.disabledBtn = true
            io.post(io.saveQuestionnaireRecord, {
                classId: this.classId,
                totalNum: this.totalNum,
                questionnaireId: this.questionnaireId,
                classQuestionDetailJson: JSON.stringify(classQuestionDetailJson)
            }, function(ret) {
                if (ret.success) {
                    _this.$toast('提交成功！')
                    _this.$router.go(-1)
                } else {
                    _this.disabledBtn = false
                    _this.$alert(ret.desc)
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
.el-form {
    padding: 10px;
    .input-answer {
        .el-input {
            width: 49%;
            &:nth-child(2n) {
                margin-left: 2%;
            }
        }
    }
    .input-answer-set {
        .el-input {
            width: 49%;
            &:nth-child(2n) {
                margin-left: 1%;
            }
        }
    }
    .icon-add,
    .icon-less {
        font-size: 20px;
        vertical-align: -0.5rem;
        fill: #01c8c0;
        cursor: pointer;
        margin: 0 5px;
        &:hover {
            fill: #3ae6df
        }
    }
    .icon-less {
        font-size: 22px;
        vertical-align: -0.63rem;
        margin-left: 30px;
    }
}

.el-form-item__content {
    text-align: left;
}

.question-number-btn {
    .el-button {
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .el-button+.el-button {
        margin-left: 0px;
    }
}

.am-text-center .el-form-item__content {
    text-align: left;
}

.el-select {
    width: 100%;
}

.am-text-center .el-form-item__content {
    text-align: center;
}
</style>
<style lang="less">
.total-score {
    color: red;
    .el-form-item__label {
        color: red;
    }
}
</style>

